<template>
    <van-swipe-cell v-for="item in goodsList" :key="item.id">
        <van-card
            class="g-card"
            :price="item.price"
            :desc="item.detail"
            :title="item.product"
            :origin-price="item.oldprice"
        >
            <template #thumb>
                <div class="g-thumb">
                    <van-checkbox
                        :checked="item.state"
                        @click="cartStore.singleCheck(item.id)"
                    ></van-checkbox>
                    <van-image :src="item.picture" />
                </div>
            </template>
            <template #tags>
                <van-tag plain type="danger">{{ item.shop }}</van-tag>
            </template>
            <template #footer>
                <van-stepper
                    v-model="item.num"
                    theme="round"
                    button-size="22"
                    disable-input
                />
            </template>
        </van-card>
        <template #right>
            <van-button
                square
                text="删除"
                type="danger"
                @click="bindDelete(item.id)"
                class="delete-button"
            />
        </template>
    </van-swipe-cell>
    <van-submit-bar :price="cartStore.totalPrice" button-text="提交订单" @submit="bindPayOder">
        <van-checkbox :checked="cartStore.stateAll" @click="cartStore.checkAll">全选</van-checkbox>
    </van-submit-bar>
</template>

<script lang="ts" setup>
import { useCart } from '@/hooks/cart'
const { cartStore, bindDelete, bindPayOder,goodsList } = useCart()
</script>

<style scoped lang="scss">
.g-card {
    margin: 0;
    background-color: white;
    
}
.g-thumb {
    display: flex;
    height: 100%;
    .van-checkbox {
        padding-right: 5px;
    }
    .van-image{
        width: 90%;
        height: 80%;
        padding-top: 10%;
    }
}

.delete-button {
    height: 100%;
}
</style>
